Overview

This is a jQuery content slider using the parallax-effect. You can create as many layers and sublayers as you want. You can use images or any other HTML elements, including Flash movies as layers. The script is very user-friendly, you can add global settings or local (per slide) settings to each layer or sublayer. You can change delay times, easing types, durations and much more.

Thank you

Thank you for purchasing this product. If you have any questions that are beyond the scope of this documentation, please feel free to email us.

Features

• Use with ANY content you want (images, HTML elements, Flash movies, YouTube videos, etc.)
  (best view with semi-transparent PNG images or CSS3 styled HTML elements)
• Sliding from / to 4 directions or fading in / out (sublayers only)
• Unlimited number of layers / sublayers
• Multiple animations and easing
• Responsive layout
• Automatic slideshow feature (optional: Backwards-Slideshow)
• Image preload feature
• Auto-play embedded YouTube and Vimeo videos (configurable)
• Auto-pause slideshow while videos are playing
• Auto-preview images to YouTube and Vimeo videos
• Loops feature
• Customizable UI
• Easy per-layer settings with rel or style tags
• Now it's easy to add a link which jumps to another layer
• Powerful API with callback functions
• Keyboard navigation
• Touch control for mobile devices (iOS tested)
• yourLogo feature with link option
• Skin support with 5 pre-defined skins
• SEO friendly
• Multiple browser support (IE 7+, Safari 3+, iOS Safari, Chrome 3+, Firefox 3+, Opera 10+)
• Detailed Documentation with examples

Changelog

2.0

• added loops feature
• added autoPlay feature for embedded YouTube and Vimeo videos
• added autoPauseSlideshow feature while videos are playing
• added auto-preview image feature to YouTube and Vimeo videos
• added linkTo feature
• included two new skins
• touch control now can be disabled
• changed one layer mode (not duplicating it now)
• fixed a wrong variable
• fixed a wrong function in forceResponsive mode
• the bottom side of the slider (next to the controls) is now clickable
• a lot of minor bugfixes and improvements

1.8

• fixed some animations
• added background-images of layers to preload
• modified some CSS styles
• some parts of the source code rewritten
• added yourLogoLink feature
• added yourLogoTarget feature
• added noskin feature

1.7

• fixed fading bug (sublayers now appears if sliding in after fading out)
• fixed preload bug with sublayers with gradient backgrounds
• fixed working delayout of layers (From now, if you add a delayout to a layer, sublayers of that layer will be animating out immediately, but the layer (and the next layer) will be delayed by the delayout time of the current layer. So, you can animate out all sublayers BEFORE the parent layer will begin the animation.)
• fixed imagepreload bug
• added an option to animating the first slide instead of fading in
• the script is now fully responsive! (You can add % instead of pixels to left and top properties of sublayers and width or height properties of LayerSlider container. IMPORTANT: you have to use style tags to add these values! For more information, please read the documentation about this!)
• added yourLogo feature (You can now display your fixed logo above LayerSlider container.)
• added a new API function called cbInit()
• some minor bugfixes

1.6

• now sublayers supports fading transition
• added slideoutdirection property to sublayers
• added global background color / background image support
• fixed '1px gap' bug
• fixed one layer bug
• fixed swing, linear and easeInOutQuint animations
• fixed hover on pause / stop bug
• fixed wrong directions of animations if navigating by slidebuttons
• fixed durationout property for sublayers

1.5

• added touch control for mobile devices
• now supports rel tags for properties
• added slidedirection property for sublayers too
• added pauseOnHover feature
• added a powerful API with callback functions

1.0

• first release

Requirements

jQuery

Because this is a jQuery plugin, you'll need jQuery and jQuery Easing JS or jQuery's UI's Effects Core to run it.

• jQuery 1.4+
• jQuery Easing JS or jQuery UI Effects Core 1.8.9+
• recommended: valid xHTML or HTML 5 markup

Browser Support

• Mozilla Firefox 3+
• Google Chrome 10+
• Safari 3+
• iOS Safari
• Opera 10+
• Internet Explorer 7+

Usage

Please note, that the following source codes are in HTML 5 markup.
If you are using xHTML, please be aware of the differences.

Setup

Include the following lines into the head section of your page. Of course the path can be different, depending where is layerslider folder on your server.

Loading the Script

You have to run this plugin like any other jQuery plugins:

						$(selector).layerSlider();

For example: if your LayerSlider container has an id named slider, the correct call method will be:

							$('#layerslider').layerSlider();

HTML Markup

Create HTML markup for layers into the body section of your page. A typical HTML markup for the script looks like this:

As you can see, we created two layers with adding class named ls-layer to the divs - in this case the slideshow will have only two complete screens. We also put sublayers into layers - these are images, but you can use any type of content you want, including HTML code, or Flash movies too.

There are a special sublayer, it is called background and it has a class named ls-bg. The parallax-effect does not apply to background sublayers - so they are always staying in the background of the parent layer. (Otherwise you can add background-images to layers too.)

Other sublayers have a class named ls-lnumber. This number is a positive integer and it is important because of the parallax effect: sublayers with higher number will animate faster and therefore it seems that you see the whole animation in 3D.

Obviously you can create unlimited sublayers and they can have the same class too.

Make LayerSlider Responsive

From version 1.7 you can make the slider responsive. So, you can add percentage values to width and height* properties of LayerSlider container and of course left and top properties of sublayers.

Important: Because of browser incompatibility you must use style tag if you want to add percentage values to these properties! Example: this is 80% wide LayerSlider with a layer that contains some sublayer that have left and top properties set in percentage:

Important: If you are using responsive layout, do not set imgPreload property to false!

Note, that in this case the left and top properties will point to the center of the current sublayer! For example if you add style="left: 50%; top: 50%;" to a sublayer, than it will be in the absolute center of the layer.

* If you want to add the height of the LayerSlider container also in percentage you must also add the height (in pixels) of the parent element of the LayerSlider container!

Global Settings

You can use the following - global - settings which are applied to the container of the slider. If you run multiple sliders on the same page, you can add different settings to each sliders. Note, that these are case sensitive.

						$('#slider').layerSlider({

							autoStart				: true,
							firstLayer				: 1,
							twoWaySlideshow			: false,
							keybNav					: true,
							touchNav				: true,
							imgPreload				: true,
							navPrevNext				: true,
							navStartStop			: true,
							navButtons				: true,
							skin					: 'default',
							skinsPath				: '/layerslider/skins/',
							pauseOnHover			: true,
							globalBGColor			: 'transparent',
							globalBGImage			: false,
							animateFirstLayer		: false,
							yourLogo				: false,
							yourLogoStyle			: 'position: absolute; z-index: 1001; left: 10px; top: 10px;',
							yourLogoLink			: false,
							yourLogoTarget			: '_blank',
							loops					: 0,
							forceLoopNum			: true,
							autoPlayVideos			: true,
							autoPauseSlideshow		: 'auto',
							youtubePreview			: 'maxresdefault.jpg',

							// you can change this settings separately by layers or sublayers with using html style attribute

							slideDirection			: 'right',
							slideDelay				: 4000,
							parallaxIn				: .45,
							parallaxOut				: .45,
							durationIn				: 1000,
							durationOut				: 1000,
							easingIn				: 'easeInOutQuint',
							easingOut				: 'easeInOutQuint',
							delayIn					: 0,
							delayOut				: 0

						});

autoStart : true or false
If true, slideshow will automatically start after loading the page.

firstLayer : number (positive integer)
LayerSlider will begin with this layer.

twoWaySlideshow : true or false
If true, slideshow will go backwards if you click the prev button.

keybNav : true or false
Keyboard navigation. You can navigate with the left and right arrow keys.

touchNav : true or false
Touch-control (on mobile devices)

imgPreload : true or false
Image preload. Preloads all images and background-images of the next layer.

navPrevNext : true or false
If false, Prev and Next buttons will be invisible.

navStartStop : true or false
If false, Start and Stop buttons will be invisible.

navButtons : true or false
If false, slide buttons will be invisible.

skin : 'name_of_the_skin'
You can change the skin of the Slider. You can read more abut this at Skin support.

skinsPath : 'path_of_the_skins_folder/'
You can change the default path of the skins folder. Note, that you must use the slash at the end of the path.

pauseOnHover : true or false
If ture, SlideShow will pause when you move the mouse pointer over the LayerSlider container.

globalBGColor : CSS color methods
Background color of LayerSlider. You can use all CSS methods, like hexa colors, rgb(r,g,b) method, color names, etc. Note, that background sublayers are covering the background.

globalBGImage : URL of the background image
Background image of LayerSlider. This will be a fixed background image of LayerSlider by default. Note, that background sublayers are covering the global background image.

animateFirstLayer : false or true
If true, first layer will animate (slide in) instead of fading.

yourLogo : 'path_of_your_image'
This is a fixed image that will be shown above of LayerSlider container. For example if you want to display your own logo, etc. You have to add the correct path to your image file.

yourLogoStyle : 'css_properties'
You can style your logo. You are allowed to use any CSS properties, for example add left and top properties to place the image inside the LayerSlider container anywhere you want.

yourLogoLink : 'domain_or_page' or false
You can add a link to your logo. Set false is you want to display only an image without a link.

yourLogoTarget : 'target'
If '_blank', the clicked url will open in a new window.

loops : number (0 or a positive integer)
Number of loops if autoStart set true (0 means infinite).

forceLoopNum : true or false
If true, the slider will always stop at the given number of loops even if the user restarts the slideshow.

autoPlayVideos : true or false
If true, slider will autoplay youtube / vimeo videos - you can use it with autoPauseSlideshow.

autoPauseSlideshow : 'auto', true or false
'auto', true or false. 'auto' means, if autoPlayVideos is set to true, slideshow will stop UNTIL the video is playing and after that it continues. True means slideshow will stop and it won't continue after video is played.

youtubePreview : 'videopreviewname.jpg'
Default thumbnail picture of YouTube videos. Can be 'maxresdefault.jpg', 'hqdefault.jpg', 'mqdefault.jpg' or 'default.jpg'. Note, that 'maxresdefault.jpg' os not available to all (not HD) videos.

The following global settings can be override separately by each layers or sublayers local settings.

slideDirection : 'left', 'right', 'top', 'bottom' or 'fade' *
Slide direction. New layers sliding FROM(!) this direction.
* From version 1.6 you can use the fade parameter if you want to fade in / out a sublayer instead of sliding. Note, that fade is working ONLY on sublayers but not on layers so if you want to fade in / out a sublayer (instead of sliding), you have to add the slidedirection or the slideoutdirection property to that sublayer and you cannot use fade as a global property! See the Local Settings below.

slideDelay : number (millisecs)
Time before the next slide will be loading.

parallaxIn : number
Modifies the parallax-effect of the slide-in animation.

parallaxOut : number
Modifies the parallax-effect of the slide-out animation.

durationIn : number (millisecs)
Duration of the slide-in animation.

durationOut : number (millisecs)
Duration of the slide-out animation.

easingIn : easing (all easing types of jQuery UI Effects Core can be used)
Easing (type of transition) of the slide-in animation.

easingOut : easing or (all easing types of jQuery UI Effects Core can be used)
Easing (type of transition) of the slide-out animation.

delayIn : number (millisecs)
Delay time of the slide-in animation.

delayOut : number (millisecs)
Delay time of the slide-out animation.

Local Settings

Some of the above settings you can apply uniquely to a layer or a sublayer. For example, if you want to add an extra slide direction and slide delay property to a layer, use the following code:

As you can see, we used the style tag to add properties.* Another example, we are adding some other properties to a sublayer:

* From version 1.5, you can use both rel and style tags to add properties. Some older browser (like Firefox 2) doesn't allow to add custom properties into style tag, so in that case you can use rel tag.

You can add this properties to layers:

• slidedirection
• slidedelay
• durationin
• durationout
• easingin
• easingout
• delayin
• delayout

You can add this properties to sublayers:

• slidedirection *
• slideoutdirection **
• parallaxin
• parallaxout
• durationin
• durationout
• easingin
• easingout
• delayin
• delayout

* From version 1.5, you can add the slidedirection property to the sublayers too. So you can animate some sublayers for example from top as the main layer is sliding from left. You can use all four directions at the same time with different sublayers inside a main layer!

** From version 1.6, you can add the slideoutdirection property to the sublayers. So you can set the slide out animation independent from the slide in animation. You can also use the fade parameter if you want to fade out a sublayer.

How to add a link which jumps to another layer (linkTo)

From version 2.0 you can easily add a special link to any sublayer which jumps to the selected layer of the slider. You don't have to write any JS code, just add a special class to the sublayer by the following way:

As you can see, we used a class name "ls-linkto-" and a number which is of course the ordinal number of the layer where you want to jump to.

LayerSlider API

We added an API to make more comfortable the usage of this script.
The API can be divided into three parts:

1. The LayerSlider Data Object

Sometimes you may need to know the current layer index or for example if the script is even animating or not. Now you can get the whole LayerSlider object with realtime values of variables at any time. Just call the $(your-layerslider-container).layerSlider('data'); function and you can get back this object. Try this:

							var lsdata = $(your-layerslider-container).layerSlider('data');
							alert(lsdata.g.curLayerIndex);

This will show you the current layer index.
You can get ALL the events and variables in real time, but the more important are the following:

• lsdata.g.curLayer (jQuery object of the current layer)
• lsdata.g.curLayerIndex (current layer index)
• lsdata.g.isAnimating (true or false)
• lsdata.g.layersNum (number of layers)
• lsdata.g.autoSlideshow (true or false, slideshow is running if true)

2. Callback functions

You can use some callback functions too. You have to define these functions with the global settings:

							$('#slider').layerSlider({
								
								...

								global settings

								...

								cbInit			: function(){ yourcode },	// Calling when LayerSlider loads.
								cbStart			: function(){ yourcode },	// Calling when you click the slideshow start button.
								cbStop			: function(){ yourcode },	// Calling when click the slideshow stop / pause button.
								cbPause			: function(){ yourcode },	// Calling when slideshow pauses (if pauseOnHover is true).
								cbAnimStart		: function(){ yourcode },	// Calling when animation starts.
								cbAnimStop		: function(){ yourcode },	// Calling when the animation of current layer ends, but the sublayers of this layer still may be animating.
								cbPrev			: function(){ yourcode },	// Calling when you click the previous button (or if you use keyboard or touch navigation).
								cbNext			: function(){ yourcode }	// Calling when you click the next button (or if you use keyboard or touch navigation).

							});

3. Controller functions

You can call these functions to control the slider:

• $('#slider').layerSlider('prev'); if you want to change to the previous layer
• $('#slider').layerSlider('next'); if you want to change to the next layer
• $('#slider').layerSlider(2); if you want to jump to a specified layer
• $('#slider').layerSlider('start'); if you want to start the slideshow
• $('#slider').layerSlider('stop'); if you want to stop the slideshow

Embedding Videos (YouTube and Vimeo)

We want to show an example how to create a layer with an embedded video sublayer. LayerSlider works with embed codes of many video sharing websites, but we created some features to improve the work with two most popular sites: YouTube and Vimeo.

So, how to put your video into a layer?

It is very simple: you will need to create a DIV sublayer and put your video embed code into. That's it! You can see in the following example, that we created a slider with two layers and we put a YouTube video into a sublayer of the first layer, and put a Vimeo video into a sublayer of the second layer.

Important things about embedding:

• You can position the video by adding style tag to the container DIV sublayer
• The dimensions of the video will be always the same as you define in the embed code with width and height properties
• You can create a full size video by adding the same width and height property to the iframe embed code as your slider's width and height

YouTube and Vimeo video features

As we said, we included some nice features if you are using YouTube and / or Vimeo video services.

Video Preview Image

LayerSlider adds a video preview image (from the video) with a play button, so when the layer slides in with a video sublayer, you don't see those video controls until the video will begin to play. If you are using YouTube, you can choose from different sizes of preview images (see youtubePreview option in Global Settings).

autoPlayVideos

If you set it true, videos will begin to play immediately when the layer slides in.

autoPauseSlideshow

If a slideshow is running and autoPlayVideos is set to true, the slideshow can be auto-paused while videos are playing. Just set autoPauseSlideshow to true or 'auto' and the slideshow will stop. Of course in 'auto' mode it will continue after the video has played.

Skin support

You can easily add skins to LayerSlider.

Actually there are five pre-defined skins that you can use. These are:

• defaultskin
• lightskin
• darkskin
• minimal
• glass

and if you want to forbid LayerSlider to load any skin, use: skin : 'noskin'.

Each of them have a separated folder in /layerslider/skins/. The name of the folder is the name of the skin too. If you open skin.css from any skin folder, you realize, that I used the name of the skin as a css class by the following way:

.ls-name_of_the_skin

If you run LayerSlider with the skin property, it will trying to load skin.css from the folder /layerslider/skin/name_of_the_skin/ and it will add ls-name_of_the_skin css class to LayerSlider container.

So, you can easily load your skin, but don't forget that the path of the skins folder.

						$('#layerslider').layerSlider({
							skin : 'darkskin'
						});

We attached a layered PSD file with the five skins.

Examples

Example 1. - A fully configured slider with local settings (default skin).

Example 2. - Light Skin

Example 3. - Dark Skin

Example 4. - Multiple sliders with new skins (v2.0) and different settings

Example 5. - Embedding YouTube and Vimeo videos (glass skin)

Example 6. - Responsive layout & yourLogo sample

Example 7. - Fullscreen Responsive layout

Contact us!

If you like our works.
If you need a help in using one of our CodeCanyon items.
If you have a great idea which we can work together.